<template>
    <div class="container">
        <div class="login-container">
            <div class="login-pic"></div>
            <div class="login-form">
                <el-form size="large" class="login" ref="formRef" :model="form" :rules="rules">
                    <div class="title">小海龙后台管理系统</div>
                    <el-form-item size="large" prop="username">
                        <el-input :prefix-icon="UserFilled" v-model="form.username" placeholder="用户名" />
                    </el-form-item>
                    <el-form-item size="large" prop="password">
                        <el-input :prefix-icon="Unlock" v-model="form.password" type="password" placeholder="请输入密码"
                            show-password />
                    </el-form-item>
                    <el-form-item>
                        <div style="width:100%;display: flex;justify-content: space-between;">
                            <el-button type="primary" link>
                                注册
                            </el-button>
                            <el-button type="primary" link>
                                忘记密码？
                            </el-button>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width: 100%;" :loading="loading"
                            @click="handleSubmit">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>

import { ref } from "vue";
import { useUserStore } from "@/stores";
import { UserFilled, Unlock } from '@element-plus/icons-vue'

const userStore = useUserStore()

const form = ref({
    username: 'admin',
    password: '287413'
})

// 按钮loading
const loading = ref(false)
const formRef = ref()

const rules = ref({
    username: [
        { required: true, message: '请输入您的用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入您的密码', trigger: 'blur' },
    ]
})

const handleSubmit = () => {
    formRef.value.validate((ok) => {
        if (ok) {
            userStore.login(form.value)
        }
    })
}
</script>

<style scoped>
.container {
    height: 100vh;
    overflow: hidden;
    background-color: #e6ebf2;
    background-image: url(../../assets/images/login/bg-login.png);
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container {
    width: 800px;
    display: flex;
    height: 500px;
    background-color: #fff;
    border-radius: 15px;
}

.login-pic {
    width: 44%;
    height: 100%;
    background-image: url(../../assets/images/login/bg-login-form.png);
    background-size: cover;
}

.login-form {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login {
    width: 320px
}

.title {
    color: #000;
    font-size: 28px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 25px;
}

.auto-login {
    margin-bottom: 24px;
    text-align: left;
}

.auto-login a {
    float: right;
}
</style>